<template>
    <div>
        <el-button
            size="mini"
            type="primary"
            :loading="binNumLoading"
            class="refresh-btn"
            @click="isRefresh"
            icon="el-icon-refresh"
            >刷新</el-button
        >
        <el-link
            :underline="false"
            type="primary"
            style="margin-bottom: 10px"
            >{{ currentRow.address || "" }}</el-link
        >
        <div
            v-loading="tab1Loading"
            element-loading-background="rgba(0, 0, 0, 0.08)"
            element-loading-text="数据加载中···"
            element-loading-spinner="el-icon-loading"
        >
            <el-card class="box-card">
                <el-form class="basic-form basic-form1">
                    <el-form-item label="4G信号CSQ：">
                        <span>{{ cardForm["07010041"] }}</span>
                    </el-form-item>
                    <el-form-item label="电表输入总电量：">
                        <span>{{ cardForm["07010064"] }} kW·h</span>
                    </el-form-item>
                    <el-form-item label="电表输入电压：">
                        <span>{{ cardForm["07010065"] }} V</span>
                    </el-form-item>
                    <el-form-item label="物联网卡号：">
                        <span>{{ cardForm["07010040"] }}</span>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>散热系统</span>
                </div>
                <el-form class="basic-form">
                    <el-form-item label="风扇组1状态：">
                        <span>{{ cardForm["07010045"] }}</span>
                    </el-form-item>
                    <el-form-item label="风扇组2状态：">
                        <span>{{ cardForm["07010046"] }}</span>
                    </el-form-item>
                    <el-form-item label="水箱进水1温度：">
                        <span>{{ cardForm["07010049"] }} ℃</span>
                    </el-form-item>
                    <el-form-item label="水箱进水2温度：">
                        <span>{{ cardForm["07010050"] }} ℃</span>
                    </el-form-item>
                    <el-form-item label="水泵组1状态：">
                        <span>{{ cardForm["07010047"] }}</span>
                    </el-form-item>
                    <el-form-item label="水泵组2状态：">
                        <span>{{ cardForm["07010048"] }}</span>
                    </el-form-item>

                    <el-form-item label="水箱出水1温度：">
                        <span>{{ cardForm["07010051"] }} ℃</span>
                    </el-form-item>
                    <el-form-item label="水箱出水2温度：">
                        <span>{{ cardForm["07010052"] }} ℃</span>
                    </el-form-item>
                    <el-form-item label="液体流速：">
                        <span>{{ cardForm["07010053"] }} L/min</span>
                    </el-form-item>
                    <el-form-item label="环境温度：">
                        <span>{{ cardForm["07010054"] }} ℃</span>
                    </el-form-item>
                    <el-form-item label="环境湿度：">
                        <span>{{ cardForm["07010055"] }} %</span>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="box-card module-card">
                <div slot="header" class="clearfix">
                    <span>模块信息</span>
                </div>
                <el-form
                    ref="binForm"
                    :model="binForm"
                    class="binForm"
                    label-width="85px"
                >
                    <el-row :gutter="10" style="width:100%">
                        <el-col :lg="8" :xl="6" v-for="(one, index) in binForm.entitys"
                                :key="index">
                            <el-card
                                style="width: 100%"
                                class="one-card"
                                :style="{
                                    borderColor: one['07010032']&&one['07010032']!='0'
                                        ? colorArray[one['07010032']]
                                        : '',
                                }"
                            >
                                <el-button
                                    type="primary"
                                    class="binIndex-btn"
                                    :circle="true"
                                    >{{ index + 1 }}</el-button
                                >
                                <div class="boxForm bin-form">
                                    <el-form-item label="组号：">
                                        <span
                                            v-if="one['07010032']"
                                            class="group-index"
                                            :style="{
                                                borderColor: one['07010032']&&one['07010032']!='0'
                                                    ? colorArray[
                                                          one['07010032']
                                                      ]
                                                    : '',
                                            }"
                                            >{{ one["07010032"] }}</span
                                        >
                                    </el-form-item>
                                    <el-form-item label="输出电压：">
                                        <span
                                            >{{
                                                toFixed(one["07010033"], 1)
                                            }}
                                            V</span
                                        >
                                    </el-form-item>
                                    <el-form-item label="输出电流：">
                                        <span
                                            >{{
                                                toFixed(one["07010034"], 1)
                                            }}
                                            A</span
                                        >
                                    </el-form-item>
                                    <el-form-item label="输入电压：">
                                        <span>{{ one["07010035"] }} V</span>
                                    </el-form-item>
                                    <el-form-item label="输入电流：">
                                        <span>{{ one["07010036"] }} A</span>
                                    </el-form-item>
                                    <el-form-item label="温度：">
                                        <span>{{ one["07010037"] }} ℃</span>
                                    </el-form-item>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="no-data">
                    <el-empty
                        v-if="binForm.entitys.length == 0"
                        description="暂无数据"
                    ></el-empty>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import { handleConfirm } from "@/utils/messageBox";
import operatejs from "./operate.js";
import { colorArray } from "@/utils/config";
import { equipment } from "@/api/factuer";
export default {
    props: {
        currentRow: {
            typeof: Object,
            default: () => {},
        },
        CSystemVisible: {
            typeof: Boolean,
            default: false,
        },
    },
    mixins: [operatejs],
    data() {
        return {
            binNumLoading: false,
            tab1Loading: false,
            cardForm: {
                "07010041": undefined,
                "07010040": undefined,
                "07010064": undefined,
                "07010065": undefined,
                "07010045": undefined,
                "07010047": undefined,
                "07010046": undefined,
                "07010048": undefined,
                "07010049": undefined,
                "07010051": undefined,
                "07010050": undefined,
                "07010052": undefined,
                "07010053": undefined,
                "07010054": undefined,
                "07010055": undefined,

                "07010031": undefined, //模块数量
            },

            binForm: { entitys: [] },
            binNum: 0, //模块数量

            colorArray: colorArray,
        };
    },
    watch: {
        CSystemVisible: {
            handler(value) {
                if (value) {
                    this.doRead(1);
                } else {
                    //弹框关闭，数据重置
                    this.resetData();
                }
            },
            immediate: true,
            deep: true,
        },
    },

    methods: {
        toFixed(val, num) {
            return val ? (val / Math.pow(10, num)).toFixed(num) : 0;
        },
        resetData() {
            this.binForm = { entitys: [] };

            for (let i in this.cardForm) {
                this.cardForm[i] = undefined;
            }
            this.tab1Loading = false;
            this.binNumLoading = false;
            this.binNum = 0;
        },
        isRefresh() {
            handleConfirm(`确定要刷新吗？`, "warning", "提示")
                .then((res) => {
                    this.doRead(1);
                })
                .catch((err) => {});
        },
        // 读取模块数量 07010031
        // readBinIndex() {
        //     let params = {
        //         entitys: [
        //             {
        //                 id: "07010031",
        //             },
        //         ],
        //         equipId: this.currentRow.id,
        //     };
        //     equipment("/operate/param/read", "post", params, 1)
        //         .then((res) => {
        //             let datas = res.data;
        //             datas.forEach((item) => {
        //                 if (item.id == "07010031") {
        //                     this.binNum = item.value;
        //                 }
        //             });
        //         })
        //         .finally(() => {
        //             this.tab1Loading = false;
        //             // 模块数量获取完成，读取参数
        //             this.doRead();
        //         });
        // },
        doRead(inx) {
            this.tab1Loading = true;
            let params = {
                entitys: [],
                equipId: this.currentRow.id,
            };
            this.binForm = {
                entitys: [],
            };

            if (inx == 1) {
                for (const key in this.cardForm) {
                    params.entitys.push({ id: key });
                }
            } else if (inx == 2) {
                //读取模块下参数

                for (let i = 0; i < this.binNum; i++) {
                    let one = {
                        "07010032": undefined,
                        "07010033": undefined,
                        "07010034": undefined,
                        "07010035": undefined,
                        "07010036": undefined,
                        "07010037": undefined,
                    };
                    this.binForm.entitys.push(one);
                    params.entitys.push(
                        { addrId: i + 1, id: "07010032" },
                        { addrId: i + 1, id: "07010033" },
                        { addrId: i + 1, id: "07010034" },
                        { addrId: i + 1, id: "07010035" },
                        { addrId: i + 1, id: "07010036" },
                        { addrId: i + 1, id: "07010037" }
                    );
                }
            }

            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;
                    datas.forEach((item) => {
                        if (inx == 1) {
                            for (const key in this.cardForm) {
                                if (key == item.id) {
                                    this.cardForm[key] = item.value;
                                }
                                if (item.id == "07010031") {
                                    this.binNum = item.value;
                                }
                            }
                        }
                        if (inx == 2) {
                            this.binForm.entitys.forEach((pp, index) => {
                                for (const key in pp) {
                                    if (
                                        item.addrId == index + 1 &&
                                        item.id == key
                                    ) {
                                        pp[key] = item.value;
                                    }
                                }
                            });
                        }
                    });

                    if (this.binNum && inx == 1) {
                        this.doRead(2);
                    }
                })
                .finally(() => {
                    this.tab1Loading = false;
                });
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.basic-form {
    width: 100%;
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    .el-form-item {
        width: 25%;
        height: 22px;
        margin: 0;

        ::v-deep .el-form-item__label {
            padding-right: 2px !important;
        }
    }
}
.basic-form1 {
    .el-form-item {
        width: 33.33%;
    }
}
.refresh-btn {
    position: absolute;
    top: 16px;
    right: 50px;
}
.box-card {
    margin: 0 0 10px;
    ::v-deep .el-card__body {
        padding: 0 10px 15px;
    }
    ::v-deep .el-card__header {
        padding: 10px;
        font-weight: bold;
        font-size: 16px;
    }
}
.module-card {
    ::v-deep .el-card__body {
        padding: 10px 0;
    }
}

.binForm {
    width: 100%;
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    .el-card {
        // width: 24.25% !important;
        margin-bottom: 10px;
        border-width: 2px;
    }
    .el-form-item {
        width: 100%;
        height: 22px;
        margin-bottom: 0;
        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
            line-height: 22px;
        }
    }
    ::v-deep .el-card__body{
        @include flexLayout(center, flex-start);
    }
}
.bin-form {
    .group-index {
        display: inline-block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        border: 2px solid #999;
        border-radius: 50%;
        text-align: center;
        color: #333;
    }
}
.binIndex-btn {
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin: 0 10px;
    background-color: #409eff;
    border-color: #409eff;
}
.no-data {
    width: 100%;
    text-align: center;
}
</style>
